<lv-group lvDirection="vertical" lvGutter="24px">
  <lv-advanced-filter #lvAdvancedFilter [(lvFields)]="fields" (lvOnChange)="onChange($event)"></lv-advanced-filter>
  <lv-datatable
    [lvData]="data"
    #lvTable
    lvSort
    [lvPaginator]="page"
    (lvSortChange)="changeSort($event)"
    (lvStateChange)="stateChange($event)"
    lvCompareWith="id"
  >
    <thead>
      <tr>
        <th lvCellKey="id">Id</th>
        <th lvCellKey="name" lvShowCustom>
          Name
          <div lvCustom class="customer-filter">
            <i
              lvColorState
              lv-icon="lv-icon-search"
              [ngClass]="{ active: !!nameFilterValue || nameSearchPanelVisible }"
              #nameFilter="lvPopover"
              lv-popover
              [lvPopoverContent]="tableNameFilterTpl"
              lvPopoverTheme="light"
              lvPopoverPosition="bottomRight"
              lvPopoverShowArrow="false"
              lvPopoverTrigger="customize"
              [(lvPopoverVisible)]="nameSearchPanelVisible"
              (click)="openNameSearchPanel()"
            ></i>
          </div>
        </th>
        <th
          lvCellKey="age"
          lvShowCustom
        >
          Age
          <div lvCustom class="customer-filter">
            <i
              lvColorState
              lv-icon="lv-icon-filter"
              [ngClass]="{ active: agePanelVisible || ageFilterValue }"
              #nameFilter="lvPopover"
              lv-popover
              [lvPopoverContent]="ageFilterTpl"
              lvPopoverTheme="light"
              lvPopoverPosition="bottomRight"
              lvPopoverShowArrow="false"
              lvPopoverTrigger="customize"
              [(lvPopoverVisible)]="agePanelVisible"
              lvPopoverClassName="age-panel"
              (click)="openAgePanel()"
            ></i>
          </div>
        </th>
        <th lvCellKey="random">Random</th>
        <th lvCellKey="date" lvShowCustom>
          Date
          <div lvCustom class="customer-filter">
            <i
              lv-icon="lv-icon-filter"
              [ngClass]="{ active: getSelectedrangeDate() }"
              #datePopover="lvPopover"
              lv-popover
              [lvPopoverContent]="dateFilterTpl"
              lvPopoverTheme="light"
              lvPopoverPosition="bottomRight"
              lvPopoverShowArrow="false"
              lvPopoverTrigger="customize"
              [(lvPopoverVisible)]="rangeDatePanelVisible"
              (click)="openRangeDatePanel($event)"
            ></i>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.random }}</td>
          <td>{{ item.date | date : 'yyyy-MM-dd' }}</td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
  <lv-paginator #page lvPageSize="5" [lvPageSizeOptions]="[5, 10, 50, 100]"></lv-paginator>
</lv-group>

<ng-template #filterTpl let-item>
  <span lv-overflow>{{ item.label }}</span>
</ng-template>

<ng-template #dateFilterTpl>
  <lv-date-range-picker
    [(ngModel)]="rangeDate"
    lvInline="true"
    [lvFormat]="'yyyy-MM-dd'"
    [lvFooterExtra]="footerTpl"
  ></lv-date-range-picker>
  <ng-template #footerTpl>
    <lv-group lvGutter="16px" style="justify-content: flex-end; margin-top: 0.16rem">
      <button lv-button (click)="cancelDate()">取消</button>
      <button lv-button lvType="primary" (click)="selectDate()">确认</button>
    </lv-group>
  </ng-template>
</ng-template>

<ng-template #tableNameFilterTpl>
  <span class="name-filter-title">Name include</span>
  <input lv-input [(ngModel)]="nameFilterValue" class="name-filter-input" />
  <div class="name-filter-operation">
    <button lv-button lvType="primary" (click)="filterByName(nameFilterValue)">Confirm</button>
  </div>
</ng-template>

<ng-template #nameFilterTpl let-value="value" let-onConfirm="onConfirm">
  <lv-group lvDirection="vertical" lvGutter="0.08rem" style="padding: 0.16rem">
    <span class="name-filter-title">Name include</span>
    <input [(ngModel)]="value.filterValue" lv-input />
    <lv-group lvGutter="0.16rem" style="justify-content: 'flex-end'; margin-top: 0.16rem; width: 100%">
      <button lv-button (click)="nameFilterValue = value.filterValue; onConfirm()" lvType="primary">Confirm</button>
    </lv-group>
  </lv-group>
</ng-template>

<ng-template #ageFilterTpl>
  <div class="lv-filter-select age-filter-select">
    <div class="lv-filter-select-container">
      <!-- 数据为空 -->
      <div class="lv-filter-select-null" (click)="$event.stopPropagation()" *ngIf="!filtersMap.age?.length">
        <lv-empty [lvImage]="null"></lv-empty>
      </div>
      <ng-container *ngIf="filtersMap.age?.length">
        <div class="lv-filter-select-list">
          <div
            class="lv-filter-select-item"
            [ngClass]="{ disabled: !!item.disabled, selected: item.selected }"
            *ngFor="let item of filtersMap.age"
            (click)="toggleFilter(item)"
          >
            <span class="lv-filter-text">{{ item.label }}</span>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>
